<template>
  <div>
    <van-nav-bar title="黑马优购"/>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="onChange"
      />
    </form>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item @click="goToDetail(item)" v-for="item in swipeList" :key="item.goods_id">
        <img :src="item.image_src">
      </van-swipe-item>
    </van-swipe>
    <!-- 分类选项 -->
    <div class="class">
      <div v-for="(item,index) in classItem" :key="index">
        <router-link v-if="index == 0" to="/class">
          <img :src="item.image_src" alt="">
        </router-link>
        <img v-else :src="item.image_src" alt="">
      </div>
    </div>
    <!-- 楼层区域 -->
    <div class="floor-container">
      <div class="floor-item" v-for="(item, index) in floorData" :key="index">
        <!-- 商品楼层图片标题 -->
        <img class="floor-item-title" :src="item.floor_title.image_src">
        <!-- 商品楼层图片内容 -->
        <div class="floor-item-box">
          <img
            class="floor-item-pic"
            v-for="(item, index) in item.product_list"
            :key="index"
            :src="item.image_src"
            :style="{ width:item.image_width/2 + 'px' }"
            @click="goToGoodsList(item.goods_id)"
          >
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <van-tabbar v-model="active" fixed border="" z-index="1" route>
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/class" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item replace to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item replace to="/shopping" icon="cart-o" :badge="$store.getters.getAllCount">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      //搜索提示列表
      // suggestList:[],
      goodsList: [],
      //轮播图数据
      swipeList: [],
      //分类数据
      classItem: [],
      //电梯数据
      floorData: [],
      active: ""
    };
  },
  created() {
    this.getSwipeList();
    this.getClassItem();
    this.getFloorData();
  },
  methods: {
    async onSearch() {
      this.$router.push("/pages/goods_list");
      const res = await this.$http.get(`/goods/qsearch?query=${this.value}`);
      //console.log(res);
      this.goodsList = res.message;
    },
    onCancel() {
      this.suggestList = [];
      this.value = "";
      this.goodsList = [];
    },

    // 获取home页 轮播图数据
    async getSwipeList() {
      const res = await this.$http.get("/home/swiperdata");
      console.log(res);

      if (res.meta.status !== 200) {
        return this.$message.error("数据加载失败");
      }
      // console.log(res.message);

      this.swipeList = res.message;
    },
    // 获取home页 分类数据
    goToDetail(item) {
      this.itemIndex = item;
    },
    async getClassItem() {
      const res = await this.$http.get("/home/catitems");
      if (res.meta.status !== 200) {
        return this.$message.error("数据加载失败");
      }
      this.classItem = res.message;
    },
    // 获取home页 商品楼层信息数据
    async getFloorData() {
      const res = await this.$http.get("/home/floordata");
      if (res.meta.status !== 200) {
        return this.$toast.fail("数据加载失败");
      }
      //console.log(res.message);

      this.floorData = res.message;
    },
    // 跳转到商品详情页
    goToDetail(goods_id) {
      this.$router.push("/pages/goods_detail/" + goods_id);
    },
    // 跳转到商品详情列表
    goToGoodsList(item) {
      this.$router.push("pages/goods_list");
    },
    async onChange() {
      const res = await this.$http.get(`/goods/qsearch?query=${this.value}`);
      //console.log(res);
      this.goodsList = res.message;
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: red;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 16px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 15px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe .van-swipe-item img {
  width: 100%;
}
.class {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  img {
    width: 64px;
    height: 70px;
  }
}
//  楼层区域的 样式
.floor-container {
  margin-bottom: 50px;
  .floor-item {
    .floor-item-title {
      height: 25px;
      width: 320px;
      display: block;
    }
    .floor-item-box {
      overflow: hidden;
      .floor-item-pic {
        float: left;
        height: 80px;
        margin: 4px;
        margin-top: 0;
        &:nth-child(1) {
          height: 180px;
        }
      }
    }
  }
}
</style>